<template>
  <div class="levelSkiteMain centerMainWidth">
    <div class="skiteHead">
        <!-- <div class="levelSkiteImg"> -->
            <!-- <img class="starImage" src="@/assets/starImages/01.jpg">
            <img class="starImage" src="@/assets/starImages/02.jpg">
            <img class="starImage" src="@/assets/starImages/03.jpg">
            <img class="starImage" src="@/assets/starImages/04.jpg">
            <img class="starImage" src="@/assets/starImages/05.jpg">
            <img class="starImage" src="@/assets/starImages/06.jpg">
            <img class="starImage" src="@/assets/starImages/07.jpg">
            <img class="starImage" src="@/assets/starImages/01.jpg">
            <img class="starImage" src="@/assets/starImages/02.jpg">
            <img class="starImage" src="@/assets/starImages/03.jpg">
            <img class="starImage" src="@/assets/starImages/04.jpg">
            <img class="starImage" src="@/assets/starImages/05.jpg">
            <img class="starImage" src="@/assets/starImages/06.jpg">
            <img class="starImage" src="@/assets/starImages/07.jpg"> -->
        <!-- </div> -->
    </div>
    <div class="skiteFoot">
        <div class="leftName">top gril</div>
        <div class="rightName">希望你在看过世间所有肮脏与不堪后 内心还能向往积极与温暖。</div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
.levelSkiteMain {
    margin-top: -110px;
    // background-color: var(--ground-new-background-color);
    .skiteHead {
        padding: 0 2.5rem;
        border-radius: 20px;
        height: 650px;
        width: 100%;
        background-image: url("@/assets/backgroundImages/bg-5.webp");
        background-size: cover;
        background-position: center;
        overflow: hidden;
        // -webkit-mask:linear-gradient(90deg,transparent,white 20%,white 80%,transparent);
        .levelSkiteImg {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 15px;
            height: 100%;
            animation: scroll 5s normal linear infinite;
            
            @keyframes scroll {
                to {
                    transform: translateX(calc(-50% - 880px));
                }
            }
            .starImage {
                height: 400px;
                width: 300px;
            }
            
        }
        
    }
    .skiteFoot {
        display: flex;
        justify-content: space-between;
        margin: 0 2rem;
        align-items: center;
        .leftName {
            font-family: 'chineseFont', sans-serif;
            font-size: 3rem;
        }
        .rightName {
            font-family: 'chineseFont', sans-serif;
            font-size: 1.5rem;
        }

    }
}
</style>